<!DOCTYPE html>
<html lang="zh-Hans">

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="x5-fullscreen" content="true">
<meta name="full-screen" content="yes">
<meta name="theme-color" content="#317EFB" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=0" name="viewport">
<meta name="description" content="前言本文使用的Hexo是一个快速、简洁且高效的博客框架，结合Gitee Pages搭建属于自己博客的教程，本文借鉴了各路大佬的文章，以及自己在搭建过程遇到的一系列问题的整理，也是为了后续搭建的开发者少走弯路。本文也是我在51CTO博客发布第一篇文章，若有表述上的错误，希望看到本文的开发者多多纠正。 参考文章： Hexo + Gitee免费部署静态博客 - 玄德ь  环境Git版本：2.39.1.w">
<meta property="og:type" content="article">
<meta property="og:title" content="使用 Gitee Pages + Hexo+Async主题 搭建自己的博客（一）-Hexo搭建">
<meta property="og:url" content="http://example.com/2023/04/19/%E4%BD%BF%E7%94%A8%20Gitee%20Pages%20+%20Hexo+Async%E4%B8%BB%E9%A2%98%20%E6%90%AD%E5%BB%BA%E8%87%AA%E5%B7%B1%E7%9A%84%E5%8D%9A%E5%AE%A2%EF%BC%88%E4%B8%80%EF%BC%89-Hexo%E6%90%AD%E5%BB%BA/index.html">
<meta property="og:site_name" content="诗与远方的小站">
<meta property="og:description" content="前言本文使用的Hexo是一个快速、简洁且高效的博客框架，结合Gitee Pages搭建属于自己博客的教程，本文借鉴了各路大佬的文章，以及自己在搭建过程遇到的一系列问题的整理，也是为了后续搭建的开发者少走弯路。本文也是我在51CTO博客发布第一篇文章，若有表述上的错误，希望看到本文的开发者多多纠正。 参考文章： Hexo + Gitee免费部署静态博客 - 玄德ь  环境Git版本：2.39.1.w">
<meta property="og:locale">
<meta property="og:image" content="http://example.com/img/404.jpg">
<meta property="og:image" content="http://example.com/img/404.jpg">
<meta property="og:image" content="http://example.com/img/404.jpg">
<meta property="article:published_time" content="2023-04-19T07:50:43.271Z">
<meta property="article:modified_time" content="2023-04-21T02:07:32.008Z">
<meta property="article:author" content="诗与远方">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://example.com/img/404.jpg">

    <meta name="keywords" content="webservice">


<title >使用 Gitee Pages + Hexo+Async主题 搭建自己的博客（一）-Hexo搭建</title>

<!-- Favicon -->

    <link href='/img/favicon.svg?v=2.0.7' rel='icon' type='image/png' sizes='16x16' ></link>


    <link href='/img/favicon.svg?v=2.0.7' rel='icon' type='image/png' sizes='32x32' ></link>




<!-- Plugin -->




    
<link rel="stylesheet" href="/css/plugins/bootstrap.row.css">

    
<link rel="stylesheet" href="https://unpkg.com/locomotive-scroll@4.1.4/dist/locomotive-scroll.min.css">

    
<link rel="stylesheet" href="https://unpkg.com/@fancyapps/ui@4.0/dist/fancybox.css">

    
    




<!-- Icon -->

    
<link rel="stylesheet" href="/css/plugins/font-awesome.min.css">




<!-- Variable -->
<script>window.ASYNC_CONFIG = {"hostname":"example.com","author":"诗与远方","root":"/","typed_text":[""],"theme_version":"2.0.7","theme":{"switch":true,"default":"style-light"},"favicon":{"logo":"/img/favicon.svg","icon16":"/img/favicon.svg","icon32":"/img/favicon.svg","appleTouchIcon":null,"webmanifest":null,"visibilitychange":false,"hidden":"/failure.ico","showText":"(/≧▽≦/)咦！又好了！","hideText":"(●—●)喔哟，崩溃啦！"},"i18n":{"placeholder":"搜索文章...","empty":"找不到您查询的内容: ${query}","hits":"找到 ${hits} 条结果","hits_time":"找到 ${hits} 条结果（用时 ${time} 毫秒）","author":"本文作者：","copyright_link":"本文链接：","copyright_license_title":"版权声明：","copyright_license_content":"本博客所有文章除特别声明外，均默认采用 undefined 许可协议。","copy_success":"复制成功","copy_failure":"复制失败","open_read_mode":"进入阅读模式","exit_read_mode":"退出阅读模式","notice_outdate_message":"距离上次更新已经 undefined 天了, 文章内容可能已经过时。","just":"刚刚","min":"分钟前","hour":"小时前","day":"天前","month":"个月前"},"swup":false,"plugin":{"flickr_justified_gallery":"https://unpkg.com/flickr-justified-gallery@latest/dist/fjGallery.min.js"},"icons":{"sun":"far fa-sun","moon":"far fa-moon","play":"fas fa-play","email":"far fa-envelope","next":"fas fa-arrow-right","calendar":"far fa-calendar-alt","clock":"far fa-clock","user":"far fa-user","back_top":"fas fa-arrow-up","close":"fas fa-times","search":"fas fa-search","reward":"fas fa-hand-holding-usd","user_tag":"fas fa-user-alt","toc_tag":"fas fa-th-list","read":"fas fa-book-reader","arrows":"fas fa-arrows-alt-h","double_arrows":"fas fa-angle-double-down","copy":"fas fa-copy"},"icontype":"font","highlight":{"plugin":"highlighjs","theme":true,"copy":true,"lang":true,"title":"default","height_limit":false}};</script>
<script id="async-page-config">window.PAGE_CONFIG = {"isPost":true,"isHome":false,"postUpdate":"2023-04-21 10:07:32"};</script>

<!-- Theme mode css -->
<link data-swup-theme rel="stylesheet" href="/css/index.css?v=2.0.7" id="trm-switch-style">
<script>
    let defaultMode = ASYNC_CONFIG.theme.default !=='auto' ?  ASYNC_CONFIG.theme.default : (window.matchMedia("(prefers-color-scheme: light)").matches ? 'style-light' : 'style-dark')
    let catchMode = localStorage.getItem('theme-mode') || defaultMode;
    let type = catchMode === 'style-dark' ? 'add' : 'remove';
    document.documentElement.classList[type]('dark')
</script>

<!-- CDN -->


    
    



<!-- Site Analytics -->
 
<meta name="generator" content="Hexo 6.3.0"></head>

<body>

  <!-- app wrapper -->
  <div class="trm-app-frame">

    <!-- page preloader -->
    <div class="trm-preloader">
    <div class="trm-holder">
        <div class="preloader">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
    <!-- page preloader end -->

    <!-- change mode preloader -->
    <div class="trm-mode-swich-animation-frame">
    <div class="trm-mode-swich-animation">
        <i class="i-sun"><i class="iconfont far fa-sun"></i></i>
        <div class="trm-horizon"></div>
        <i class="i-moon"><i class="iconfont far fa-moon"></i></i>
    </div>
</div>
    <!-- change mode preloader end -->

      <!-- scroll container -->
      <div id="trm-dynamic-content" class="trm-swup-animation">
        <div id="trm-scroll-container" class="trm-scroll-container" data-scroll-container style="opacity: 0">
          <div data-scroll-section id="content" class="trm-scroll-section">

            <div class="locomotive-scroll__sticky-target" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none;"></div>

            <!-- top bar -->
            <header class="trm-top-bar" data-scroll data-scroll-sticky data-scroll-target=".locomotive-scroll__sticky-target" data-scroll-offset="-10">
	<div class="container">
		<div class="trm-left-side">
			<!-- logo -->
<a href="/" class="trm-logo-frame trm-anima-link">
    
        <img alt="logo" src="/img/favicon.svg">
    
    
        <div class="trm-logo-text">
            诗与<span>远方</span>
        </div>
    
</a>
<!-- logo end -->
		</div>
		<div class="trm-right-side">
			<!-- menu -->
<div class="trm-menu">
    <nav>
        <ul>
            
            <li class="menu-item-has-children ">
                <a  href="/" target="">
                    首页
                </a>
                
            </li>
            
            <li class="menu-item-has-children ">
                <a data-no-swup href="/archives/" target="">
                    归档
                </a>
                
            </li>
            
            <li class="menu-item-has-children ">
                <a data-no-swup href="/about/" target="">
                    关于
                </a>
                
            </li>
            
        </ul>
    </nav>
</div>
<!-- menu end -->
			
    <!-- mode switcher place -->
    <div class="trm-mode-switcher-place">
        <div class="trm-mode-switcher">
            <i class="iconfont far fa-sun"></i>
            <input class="tgl tgl-light" id="trm-swich" type="checkbox">
            <label class="trm-swich" for="trm-swich"></label>
            <i class="iconfont far fa-moon"></i>
        </div>
    </div>
    <!-- mode switcher place end -->

			
		</div>
		<div class="trm-menu-btn">
			<span></span>
		</div>
	</div>
</header>
            <!-- top bar end -->

            <!-- body -->
            
<div class="trm-content-start">
    <!-- banner -->
    <div class="trm-banner" data-scroll data-scroll-direction="vertical">
    
    <!-- banner cover -->
    <img style="object-position:top;object-fit:cover;" alt="banner" class="trm-banner-cover" data-scroll data-scroll-direction="vertical" data-scroll-speed="-3" src="https://pic1.zhimg.com/v2-b3c2c6745b9421a13a3c4706b19223b3_r.jpg">
    <!-- banner cover end -->
    

    <!-- banner content -->
    <div class="trm-banner-content trm-overlay">
        <div class="container" data-scroll data-scroll-direction="vertical" data-scroll-speed="0">
            <div class="row">
                
                <div class="col-lg-4"></div>
                
                <div class="col-lg-8">

                    <!-- banner title -->
                    <div class="trm-banner-text ">
                        <div class="trm-label trm-mb-20">
                            学无止境!
                        </div>
                        <h1 class="trm-mb-30 trm-hsmb-font">
                            使用 Gitee Pages + Hexo+Async主题 搭建自己的博客（一）-Hexo搭建
                        </h1>

                        
                            <ul class="trm-breadcrumbs trm-label">
                                <li>
                                    <a href="/" class="trm-anima-link">Home</a>
                                </li>
                                <li>
                                    <span>
                                        2023
                                    </span
                                ></li>
                            </ul>
                        
                    </div>
                    <!-- banner title end -->

                    <!-- scroll hint -->
                    <a href="#about-triger" data-scroll-to="#about-triger" data-scroll-offset="-130" class="trm-scroll-hint-frame">
                        <div class="trm-scroll-hint"></div>
                        <span class="trm-label">Scroll down</span>
                    </a>
                    <!-- scroll hint end -->

                </div>
            </div>
        </div>
    </div>
    <!-- banner content end -->
</div>
    <!-- banner end -->
    <div class="container">
        <div class="row">
            
                <div id="page-sidebar" class="col-lg-4 hidden-sm">
                    <!-- main card -->
                    

<div class="trm-main-card-frame trm-sidebar">
    <div class="trm-main-card" data-scroll data-scroll-repeat data-scroll-sticky data-scroll-target=".locomotive-scroll__sticky-target" data-scroll-offset="60"> 
    
        <!-- card header -->
<div class="trm-mc-header">
    <div class="trm-avatar-frame trm-mb-20">
        <img alt="Avatar" class="trm-avatar" src="/image/avatar.jpg">
    </div>
    <h5 class="trm-name trm-mb-15">
        诗与远方
    </h5>
    
        <div class="trm-label">
            🔥努力奋斗的有志青年
            <span class="trm-typed-text">
                <!-- Words for theme.user.typedText -->
            </span>
        </div>
    
</div>
<!-- card header end -->
        <!-- sidebar social -->

<div class="trm-divider trm-mb-40 trm-mt-40"></div>
<div class="trm-social">
    
        <a href="https://github.com" title="github" rel="nofollow" target="_blank">
            <i class="iconfont fab fa-github"></i>
        </a>
    
        <a href="https://gitee.com/denggui" title="gitee" rel="nofollow" target="_blank">
            <i class="iconfont fab fa-gofore"></i>
        </a>
    
</div>

<!-- sidebar social end -->
        <!-- info -->
<div class="trm-divider trm-mb-40 trm-mt-40"></div>
<ul class="trm-table trm-mb-20">
    
        <li>
            <div class="trm-label">
                现居住地:
            </div>
            <div class="trm-label trm-label-light">
                江苏·南京
            </div>
        </li>
    
</ul>
<!-- info end -->

        
    <div class="trm-divider trm-mb-40 trm-mt-40"></div>
    <!-- action button -->
    <div class="text-center">
        <a href="mailto:87286679@qq.com" class="trm-btn">
            联系我
            <i class="iconfont far fa-envelope"></i>
        </a>
    </div>
    <!-- action button end -->

    
    </div>
</div>
                    <!-- main card end -->
                </div>
            
            <div id="page-content" class="col-lg-8">
                <div class="trm-content" id="trm-content">
                    <div data-scroll data-scroll-repeat data-scroll-offset="500" id="about-triger"></div>

                    <div id="post-info" class="row hidden-sm">
    <div class="col-sm-4">
        <div class="trm-card trm-label trm-label-light text-center">
            <i class="iconfont far fa-calendar-alt trm-icon"></i><br>
            04/19
        </div>
    </div>
    <div class="col-sm-4">
        <div class="trm-card trm-label trm-label-light text-center">
            <i class="iconfont far fa-clock trm-icon"></i><br>
            15:50
        </div>
    </div>
    <div class="col-sm-4">
        <div id="post-author" class="trm-card trm-label trm-label-light text-center">
            <i class="iconfont far fa-user trm-icon"></i><br>
            诗与远方
        </div>
    </div>
</div>
<div class="trm-card ">
    <article id="article-container" class="trm-publication">
    <h3 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h3><p>本文使用的Hexo是一个快速、简洁且高效的博客框架，结合Gitee Pages搭建属于自己博客的教程，本文借鉴了各路大佬的文章，以及自己在搭建过程遇到的一系列问题的整理，也是为了后续搭建的开发者少走弯路。本文也是我在51CTO博客发布第一篇文章，若有表述上的错误，希望看到本文的开发者多多纠正。</p>
<h4 id="参考文章："><a href="#参考文章：" class="headerlink" title="参考文章："></a>参考文章：</h4><blockquote>
<p>Hexo + Gitee免费部署静态博客 - <a target="_blank" rel="noopener" href="https://blog.csdn.net/qq_60700961/article/details/125978581">玄德ь</a></p>
</blockquote>
<h4 id="环境"><a href="#环境" class="headerlink" title="环境"></a>环境</h4><p>Git版本：2.39.1.windows.1</p>
<p>node版本：v18.13.0</p>
<p>pnpm版本：7.29.1</p>
<h3 id="一、安装Hexo"><a href="#一、安装Hexo" class="headerlink" title="一、安装Hexo"></a>一、安装Hexo</h3><ol>
<li>推荐切换成淘宝源，避免不必要的麻烦</li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -g cnpm --registry=https://registry.npm.taobao.org</span><br></pre></td></tr></table></figure>

<ol start="2">
<li>执行安装Hexo的命令：</li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -g hexo-cli</span><br></pre></td></tr></table></figure>

<p>若遇到hexo安装到了全局的目录以及环境配置问题可以参考<a target="_blank" rel="noopener" href="https://blog.csdn.net/qq_60700961/article/details/125978581">玄德ь</a>的博客</p>
<h3 id="二、Hexo初始化配置"><a href="#二、Hexo初始化配置" class="headerlink" title="二、Hexo初始化配置"></a>二、Hexo初始化配置</h3><ol>
<li>初始化命令：</li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo init &lt;文件夹&gt;</span><br></pre></td></tr></table></figure>

<p>路径以及文件夹名可以根据开发者自行选择，执行指令后等待从github上拉取代码，会生成如下内容：</p>
<p><img src="https://s2.51cto.com/images/202304/131d0a3437804a7646c003593688095a18ddb0.png?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=,x-oss-process=image/resize,m_fixed,w_1184" loading="lazy" onerror='this.onerror=null;this.src="/img/404.jpg"'></p>
<ol start="2">
<li>引用<a target="_blank" rel="noopener" href="https://blog.csdn.net/qq_60700961/article/details/125978581">玄德ь</a>的博客解释一下对应的文件夹：</li>
</ol>
<blockquote>
<ul>
<li><strong>node_modules</strong> ：hexo相关的依赖包</li>
<li><strong>public</strong> ：存放在hexo生成的页面、静态资源等</li>
<li><strong>scaffolds</strong> ：生成文章的模板文件</li>
<li><strong>source</strong> ：存放相应页面的内容，以及将博客发布文章的md文件</li>
<li><strong>themes</strong> ：主题相关配置</li>
<li><strong>_config.yml</strong> ：整个hexo博客的配置</li>
<li><strong>_config.async.yml</strong> ：当引入主题后，为了避免和hexo配置内容重叠，主题相关的配置内容写在这个新文件中</li>
<li><strong>package.json</strong> ：项目所需模块的配置信息</li>
</ul>
</blockquote>
<h3 id="三、搭建完成编译运行Hexo"><a href="#三、搭建完成编译运行Hexo" class="headerlink" title="三、搭建完成编译运行Hexo"></a>三、搭建完成编译运行Hexo</h3><p>进入项目所在根目录后执行如下命令：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo s</span><br></pre></td></tr></table></figure>

<p><img src="https://s2.51cto.com/images/202304/c6d549b90eeb99c69f704725ade96ff42bf926.png?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=,x-oss-process=image/resize,m_fixed,w_1184" loading="lazy" onerror='this.onerror=null;this.src="/img/404.jpg"'></p>
<p>项目默认端口是4000，若需修改启动端口可以使用如下命令：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo serer -p 端口号</span><br></pre></td></tr></table></figure>

<p>打开<a href="http://localhost:4000就可以看到已搭建好的Hexo页面了">http://localhost:4000就可以看到已搭建好的Hexo页面了</a></p>
<p><img src="https://s2.51cto.com/images/202304/c193daf4446d91a1d1b716d37af0d33865f4d9.png?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=,x-oss-process=image/resize,m_fixed,w_1184" loading="lazy" onerror='this.onerror=null;this.src="/img/404.jpg"'></p>
<h3 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h3><p>Hexo的整体搭建起来并不困难，很容易上手，后面我会陆续更新后续的博客搭建以及自己的一些总结的内容~</p>

</article>
    
    

</div>
<div id="post-next-prev" class="row">
    <div class="col-lg-12">
        <!-- title -->
        <h5 class="trm-title-with-divider">
            其他文章
            <span data-number="02"></span>
        </h5>
    </div>
    
    
        <div class="col-lg-6">
    <div class="trm-blog-card trm-scroll-animation" data-scroll data-scroll-offset="40">
        <a href="/2023/04/17/%E6%A0%B9%E6%8D%AE%E5%AD%90%E8%8A%82%E7%82%B9%E6%89%BE%E6%A0%B9%E8%8A%82%E7%82%B9/" class="trm-cover-frame trm-anima-link">
            
            
                <img alt="cover" class="no-fancybox" src="https://www.mysql.com/common/logos/logo-mysql-170x115.png">
            
        </a>
        
        <div class="trm-card-descr">
            <div class="trm-label trm-category trm-mb-20">
                <a href=" /categories/%E5%BC%80%E5%8F%91%E7%B1%BB/">
                    开发类
                </a>
            </div>
            <h5>
                <a href="/2023/04/17/%E6%A0%B9%E6%8D%AE%E5%AD%90%E8%8A%82%E7%82%B9%E6%89%BE%E6%A0%B9%E8%8A%82%E7%82%B9/" class="trm-anima-link">
                    根据子节点找根节点
                </a>
            </h5>
            <div class="trm-divider trm-mb-20 trm-mt-20"></div>
            <ul class="trm-card-data trm-label">
                <li>23/04/17</li>
                <li>11:36</li>
                
                
            </ul>
        </div>
    </div>
</div>
    
</div>

    



                    <div class="trm-divider footer-divider"></div>

                    <!-- footer -->
                    <footer class="trm-scroll-animation" data-scroll data-scroll-offset="50">

    

    
        <div class="trm-footer-item">
            <span>© 2023- 2023</span>
            <span class="footer-separator"data-separator=" · "></span>
            <span class="trm-accent-color">诗与远方</span>
        </div>
    

    
        <div class="trm-footer-item">
            <span>
                由 <a href="https://hexo.io" target="_blank" rel="noopener">Hexo</a> 驱动 v6.3.0
            </span>
            <span class="footer-separator" data-separator=" | "></span>
            <span> 
                主题 - 
                <a rel="noopener" href='https://github.com/MaLuns/hexo-theme-async' target='_blank'>Async</a>
                v2.0.7
            </span>
        </div>
      

    
        <div class="trm-footer-item">
            博客已萌萌哒运行 <span id="since" class="trm-accent-color"></span> 天
        </div>
     

     
</footer>

<script>
    function show_date_time () {
        var BirthDay = new Date("04/13/2023 17:00:00");
        var today = new Date();
        var timeold = (today.getTime() - BirthDay.getTime());
        var msPerDay = 24 * 60 * 60 * 1000
        var day = Math.floor(timeold / msPerDay)
        since.innerHTML = day
    }
    show_date_time()
</script>
 
                    <!-- footer end -->

                </div>
            </div>
        </div>
    </div>
</div>
            <!-- body end -->

            <div class="trm-fixed-container" data-scroll data-scroll-sticky data-scroll-target=".locomotive-scroll__sticky-target" data-scroll-offset="-10">
    
        <div class="trm-fixed-btn" data-title="阅读模式" onclick="asyncFun.switchReadMode()">
            <i class="iconfont fas fa-book-reader"></i>
        </div>
    
    
    <div id="trm-back-top" class="trm-fixed-btn" data-title="回到顶部">
        <i class="iconfont fas fa-arrow-up"></i>
    </div>
</div>
          </div>
        </div>
      </div>
      <!-- scroll container end -->

  </div>
  <!-- app wrapper end -->

  
  <!-- Plugin -->




    
    
<script src="https://unpkg.com/locomotive-scroll@4.1.4/dist/locomotive-scroll.min.js"></script>

    
<script src="https://unpkg.com/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>

    

    
        <script src="/js/plugins/typing.js?v=2.0.7"></script>
    

    

    <!-- 数学公式 -->
    

    <!-- 评论插件 -->
    
        

        
    



<!-- CDN -->


    

    

    




    <!-- Service Worker -->
    
    <!-- baidu push -->
    


<script id="async-script" src="/js/main.js?v=2.0.7"></script>

</body>

</html>